import React, { Component, Fragment } from 'react'

class Todolist extends Component {

  constructor(props) {
    super(props)
    this.state = {
      inputValue: '',
      list: []
    }
  }

  render() {
    return (
      <Fragment>
        <div>
          <input value={this.state.inputValue} onChange={this.handleInputChange.bind(this)}/>
          <button onClick={this.handleBtnClick.bind(this)}>submit</button>
        </div>
        <ul>
          {this.state.list.map((item, index) => {
            return (
              <li key={index} onClick={this.handleItemDelete.bind(this, index)}>{item}</li>
            )
          })}
        </ul>
      </Fragment>
      /**
       *  如果是这么写的话，React会报错，因为React要求render函数返回的内容必须外面要包裹一个大的元素当中，
       *  我们肯定会想到用一个大的<div>去包裹，但是当我们在布局的时候，我们既不想影响布局又不想出错怎么办，
       *  react16提供了一个api，‘Fragment’
       */
    )
  }

  handleInputChange(e) {
    this.setState({
      inputValue: e.target.value
    })
  }

  handleBtnClick() {
    this.setState({
      list: [...this.state.list, this.state.inputValue],
      inputValue: ''
    })
  }

  handleItemDelete(index) {
    const list = [...this.state.list]
    list.splice(index, 1)
    this.setState({
      list: list
    })
  }
}

export default Todolist
